<template>
    <div>
        <template>
            <el-carousel :interval="4000" type="card" height="300px">
                <el-carousel-item v-for="item in cardList" :key="item.name">
                    <img :src="item.src" style="height:100%;width:100%;" alt="">
                </el-carousel-item>
            </el-carousel>
        </template>

        <div class="content">
            <el-popover
                    ref="popover5"
                    placement="top"
                    width="160"
                    v-model="visible2">
                <p>这是一段内容这是一段内容确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
                </div>
            </el-popover>

            <el-button v-popover:popover5>删除</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                visible2: false,
                cardList:[
                    {
                        name: "111",
                        src: require("@/assets/t1.jpg")
                    },
                    {
                        name: "111",
                        src: require("@/assets/t2.jpg")
                    },
                    {
                        name: "111",
                        src: require("@/assets/t3.jpg")
                    },
                    {
                        name: "111",
                        src: require("@/assets/t4.png")
                    },
                    {
                        name: "111",
                        src: require("@/assets/t5.jpg")
                    },
                ]
            }
        }
    }
</script>

<style>
    .el-carousel{
        width: 1200px;
        margin: auto;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>